
import { WeaTab } from "ecCom";
import { Row, Col, Spin } from 'antd';
import ToolBar from '../../common/ToolBar'
import { observer, inject } from 'mobx-react';
import { WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import Item from './Item'
@inject('wfCenterStore')
@observer
class StatisticCenter extends React.Component {
  constructor () {
    super();
    this.state = {
      key: '',
      tabs: [],
      statisticScope: ''
    }
  }
  componentDidMount() {
    const { getWfCenterStatisticInfo } = this.props.wfCenterStore;
    getWfCenterStatisticInfo({},this.changeState);
  }
  componentWillReceiveProps(nextProps) {
    const { getWfCenterStatisticInfo } = this.props.wfCenterStore;
    if(this.props.location.key !== nextProps.location.key) {
      getWfCenterStatisticInfo({},this.changeState);
    }
  }
  shouldComponentUpdate(nextProps,nextState) {
      return true;
  }
  changeState = (obj={}) => {
    this.setState({
      tabs: obj.tabs,
      statisticScope: obj.statisticScope,
      key: obj.tabs && obj.tabs[0].key
    });
  }
  tabSwitch = (key) => {
    const { getTabSwitch, changeLoadStatus } = this.props.wfCenterStore;
    this.setState({key: key});
    getTabSwitch('staticCenter', {key: key});
    changeLoadStatus({statisticHasLoaded: false})
  }
  doRefresh = () => {
    const { getTabSwitch, changeLoadStatus } = this.props.wfCenterStore;
    getTabSwitch('staticCenter', {key: this.state.key});
    changeLoadStatus({statisticHasLoaded: false})
  }
  render() {
    const { statisticTabContentInfo } = this.props.wfCenterStore;
    const { tabs=[], statisticScope=''} = this.state;
    statisticTabContentInfo && statisticTabContentInfo.length > 0 && statisticTabContentInfo.map(v => {
      switch(v.type) {
        case('handledWfInfo'): {
         v.imgSrc = '/images/ecology9/workflow/center/statisticCenter/handlewf.png';
        };break;
        case('createInfo'): {
          v.imgSrc = '/images/ecology9/workflow/center/statisticCenter/createwf.png';
        }; break;
        case('doingWfInfo'): {
          v.imgSrc = '/images/ecology9/workflow/center/statisticCenter/backlog.png';
        }; break;
        case('overtimeWfInfo'): {
          v.imgSrc = '/images/ecology9/workflow/center/statisticCenter/overtimewf.png';
        }; break;
      }
    })
    
    const { layoutInfo, loadingStatusObj:{ statisticHasLoaded } } = this.props.wfCenterStore;
    return (
      <div className='all-ele'>
        <div className='all-ele-header'>
        <ToolBar ecId={`${this && this.props && this.props.ecId || ''}_ToolBar@din1s9`} toolSetting={{refresh:true}} doRefresh={this.doRefresh}/>
        <div className='data-range-div'>
          <p>{ statisticScope }</p>
        </div>
          <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@va3nw4`}
            datas={tabs}
            keyParam="key"
            selectedKey={this.state.key}
            onChange={this.tabSwitch}
          />
        </div>
        <div className='all-ele-content'>
          <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@euvpgk`} spinning={!statisticHasLoaded}/>
            <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@mpdsss`}>
              {
                statisticTabContentInfo && statisticTabContentInfo.length > 0 && statisticTabContentInfo.map ( (v,index) => {
                  return <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@fx44ld@${index}`} span={layoutInfo.openOverTime ? 6 : 8}>
                      <Item ecId={`${this && this.props && this.props.ecId || ''}_Item@2qi7v1@${index}`} data={v}/>
                  </Col>
                })
              }
            </Row>
          </div>
      </div>
    )
  }
}

export default StatisticCenter;


